<template>
    <div id="login">
        <el-card>
            <h3>系统登录</h3>
            <div class="login-info">
                <el-form ref='form' :rules="rules" :inline="true" :model="form">
                    <el-form-item  label="用户名" prop="username">
                        <el-input placeholder="请输入用户名" v-model="form.username"></el-input>
                    </el-form-item>
                    <el-form-item  label="密码" prop="password">
                        <el-input type="password" placeholder="请输入密码" v-model="form.password"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <el-button type="primary" @click="login">登录</el-button>
        </el-card>
    </div>
</template>

<script>
import { getMenu } from '../api';
import Cookie from 'js-cookie';
export default {
    name: 'Login',
    data() {
        return {
            form: {
                username: '',
                password: '',
            },
            rules: {
                username: [
                    {
                        required: true,
                        message: "请输入用户名",
                        trigger: "blur",
                    },
                ],
                password: [
                    {
                        required: true,
                        message: "请输入密码",
                        trigger: "blur",
                    },
                ],
            },
        }
    },
    methods: {
        login() {
            // form表单的校验
            this.$refs.form.validate((valid) => {
                if (valid) {
                    getMenu(this.form).then(({ data }) => {
                        // console.log(data);
                        if (data.code === 20000) {
                            // 将token值存入cookie缓存中
                            Cookie.set('token', data.data.token);
                            // 获取菜单数据,存入store实例的setMenu方法中
                            this.$store.commit('setMenu', data.data.menu);
                            // 将当前页面的$router存入store实例中的addMenuOrRouter方法中
                            this.$store.commit('addMenuOrRouter', this.$router);
                            // 跳转至首页
                            this.$router.push({ name: 'home' });
                        } else {
                            this.$message({
                                message: data.data.message,
                                type: 'error'
                            });
                        }
                    });
                }
            })
        },
    },
}
</script>

<style lang="less" scoped>
    #login {
        display: flex;
        justify-content: center;
	    align-items: center;
        height: 100vh;
        .el-card {
            text-align: center;
            width: 25%;
            height: 35%;
            display: flex;
            align-items: center;
            .login-info {
                margin-top: 40px;
            }
            // /deep/.el-card__body {
            // }
        }
    }
</style>